<template>
  <div class="box-card">
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="line-height: 0; text-align: left;">
      <div>
        <div style="width: 1300px; height: 700px">
          <div ref="chart"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myecharts: null,
      option: {}
    }
  },
  methods: {
    async fetchData() {
      try {
        const res = await this.$Http.get('/reports/type/1')
        this.myecharts = this.$echarts.init(this.$refs.chart)
        this.option = res.data
        this.myecharts.setOption(this.option)
        window.addEventListener('resize', () => {
          this.myecharts.resize()
        })
      } catch (error) {
        console.log(error);
      }
    }
  }
}
</script>